@import url('@/styles/root.scss');

/*
 * ===========================================
 * WX Web 主题系统
 * ===========================================
 * 基于基础设计系统定义的深色和浅色主题
 * 按模块组织，每个模块包含完整的状态定义
 */

/* ===========================================
 * 浅色主题 (Light Theme)
 * =========================================== */
body.light,
body:not(.dark) {
	/* 页面基础 */
	background: var(--color-white);
	color: var(--gray-900);

	/* ===========================================
	 * 1. 导航栏模块 (Navigation)
	 * =========================================== */

	/* 导航栏基础 */
	--nav-bg: rgba(255, 255, 255, 0.95);
	--nav-backdrop: var(--backdrop-blur-base);
	--nav-border: var(--gray-200);
	--nav-shadow: var(--shadow-sm);

	/* 导航栏文字 */
	--nav-text: var(--gray-900);
	--nav-text-muted: var(--gray-600);
	--nav-text-active: var(--brand-primary);

	/* 导航栏悬停效果 */
	--nav-hover-bg: var(--gray-100);
	--nav-hover-text: var(--brand-primary);

	/* 导航栏激活状态 */
	--nav-active-bg: var(--brand-primary-50);
	--nav-active-text: var(--brand-primary);
	--nav-active-border: var(--brand-primary);

	/* ===========================================
	 * 2. 卡片模块 (Card)
	 * =========================================== */

	/* 卡片基础 */
	--card-bg: rgba(255, 255, 255, 0.9);
	--card-border: var(--gray-200);
	--card-shadow: var(--shadow-base);
	--card-backdrop: var(--backdrop-blur-base);

	/* 卡片悬停效果 */
	--card-hover-shadow: var(--shadow-lg);
	--card-hover-transform: translateY(-2px);
	--card-hover-bg: rgba(255, 255, 255, 0.95);

	/* 卡片头部和底部 */
	--card-header-bg: var(--gray-50);
	--card-footer-bg: var(--gray-50);
	--card-header-border: var(--gray-200);

	/* ===========================================
	 * 3. 内容模块 (Content)
	 * =========================================== */

	/* 内容区基础 */
	--content-bg: var(--color-white);
	--content-bg-alt: var(--gray-50);
	--content-border: var(--gray-200);

	/* 内容区悬停效果 */
	--content-hover-bg: var(--gray-50);

	/* ===========================================
	 * 4. 页尾模块 (Footer)
	 * =========================================== */

	/* 页尾基础 */
	--footer-bg: var(--gray-50);
	--footer-border: var(--gray-200);

	/* 页尾文字 */
	--footer-text: var(--gray-700);
	--footer-text-muted: var(--gray-500);

	/* 页尾悬停效果 */
	--footer-hover-text: var(--brand-primary);
	--footer-hover-bg: var(--gray-100);

	/* ===========================================
	 * 5. 按钮模块 (Button)
	 * =========================================== */

	/* 主要按钮 */
	--button-primary-bg: var(--brand-primary);
	--button-primary-text: var(--color-white);
	--button-primary-border: var(--brand-primary);
	--button-primary-shadow: var(--shadow-sm);

	/* 主要按钮悬停 */
	--button-primary-hover-bg: var(--brand-primary-600);
	--button-primary-hover-shadow: var(--shadow-md);
	--button-primary-hover-transform: translateY(-1px);

	/* 主要按钮激活 */
	--button-primary-active-bg: var(--brand-primary-700);
	--button-primary-active-transform: translateY(0);

	/* 次要按钮 */
	--button-secondary-bg: var(--gray-100);
	--button-secondary-text: var(--gray-700);
	--button-secondary-border: var(--gray-300);
	--button-secondary-shadow: var(--shadow-xs);

	/* 次要按钮悬停 */
	--button-secondary-hover-bg: var(--gray-200);
	--button-secondary-hover-text: var(--gray-900);
	--button-secondary-hover-border: var(--gray-400);

	/* 边框按钮 */
	--button-outline-bg: transparent;
	--button-outline-text: var(--brand-primary);
	--button-outline-border: var(--brand-primary);

	/* 边框按钮悬停 */
	--button-outline-hover-bg: var(--brand-primary);
	--button-outline-hover-text: var(--color-white);

	/* 幽灵按钮 */
	--button-ghost-bg: transparent;
	--button-ghost-text: var(--gray-700);
	--button-ghost-hover-bg: var(--gray-100);

	/* ===========================================
	 * 6. 文字模块 (Text)
	 * =========================================== */

	/* 主要文字 */
	--text-primary: var(--gray-900);
	--text-secondary: var(--gray-600);
	--text-tertiary: var(--gray-400);
	--text-placeholder: var(--gray-400);

	/* 标题文字 */
	--text-heading: var(--gray-900);
	--text-title: var(--brand-primary);
	--text-subtitle: var(--gray-700);

	/* 链接文字 */
	--text-link: var(--brand-primary);
	--text-link-hover: var(--brand-primary-600);
	--text-link-visited: var(--brand-primary-700);

	/* ===========================================
	 * 7. 表单模块 (Form)
	 * =========================================== */

	/* 输入框基础 */
	--input-bg: var(--color-white);
	--input-border: var(--gray-300);
	--input-text: var(--gray-900);
	--input-placeholder: var(--gray-400);
	--input-shadow: var(--shadow-xs);

	/* 输入框聚焦 */
	--input-focus-border: var(--brand-primary);
	--input-focus-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
	--input-focus-bg: var(--color-white);

	/* 输入框禁用 */
	--input-disabled-bg: var(--gray-50);
	--input-disabled-text: var(--gray-400);
	--input-disabled-border: var(--gray-200);

	/* ===========================================
	 * 8. 表格模块 (Table)
	 * =========================================== */

	/* 表格基础 */
	--table-bg: var(--color-white);
	--table-border: var(--gray-200);
	--table-header-bg: var(--gray-50);
	--table-header-text: var(--gray-700);

	/* 表格行 */
	--table-row-bg: var(--color-white);
	--table-row-alt-bg: var(--gray-50);
	--table-row-hover-bg: var(--brand-primary-50);
	--table-row-selected-bg: var(--brand-primary-100);

	/* ===========================================
	 * 9. 其他组件
	 * =========================================== */

	/* 分割线 */
	--divider: var(--gray-200);
	--divider-light: var(--gray-100);

	/* 滚动条 */
	--scrollbar-bg: var(--gray-100);
	--scrollbar-thumb: var(--gray-300);
	--scrollbar-thumb-hover: var(--gray-400);

	/* 选中状态 */
	--selection-bg: var(--brand-primary-100);
	--selection-text: var(--gray-900);
}

/* ===========================================
 * 深色主题 (Dark Theme)
 * =========================================== */
body.dark {
	/* 页面基础 */
	background: var(--gray-900);
	color: var(--gray-100);

	/* ===========================================
	 * 1. 导航栏模块 (Navigation)
	 * =========================================== */

	/* 导航栏基础 */
	--nav-bg: rgba(17, 24, 39, 0.95);
	--nav-backdrop: var(--backdrop-blur-base);
	--nav-border: var(--gray-700);
	--nav-shadow: var(--shadow-base);

	/* 导航栏文字 */
	--nav-text: var(--gray-100);
	--nav-text-muted: var(--gray-400);
	--nav-text-active: var(--brand-primary-300);

	/* 导航栏悬停效果 */
	--nav-hover-bg: var(--gray-800);
	--nav-hover-text: var(--brand-primary-300);

	/* 导航栏激活状态 */
	--nav-active-bg: rgba(59, 130, 246, 0.1);
	--nav-active-text: var(--brand-primary-300);
	--nav-active-border: var(--brand-primary-300);

	/* ===========================================
	 * 2. 卡片模块 (Card)
	 * =========================================== */

	/* 卡片基础 */
	--card-bg: rgba(31, 41, 55, 0.8);
	--card-border: var(--gray-700);
	--card-shadow: var(--shadow-lg);
	--card-backdrop: var(--backdrop-blur-base);

	/* 卡片悬停效果 */
	--card-hover-shadow: var(--shadow-xl);
	--card-hover-transform: translateY(-2px);
	--card-hover-bg: rgba(31, 41, 55, 0.9);

	/* 卡片头部和底部 */
	--card-header-bg: var(--gray-800);
	--card-footer-bg: var(--gray-800);
	--card-header-border: var(--gray-700);

	/* ===========================================
	 * 3. 内容模块 (Content)
	 * =========================================== */

	/* 内容区基础 */
	--content-bg: var(--gray-900);
	--content-bg-alt: var(--gray-800);
	--content-border: var(--gray-700);

	/* 内容区悬停效果 */
	--content-hover-bg: var(--gray-800);

	/* ===========================================
	 * 4. 页尾模块 (Footer)
	 * =========================================== */

	/* 页尾基础 */
	--footer-bg: var(--gray-800);
	--footer-border: var(--gray-700);

	/* 页尾文字 */
	--footer-text: var(--gray-300);
	--footer-text-muted: var(--gray-500);

	/* 页尾悬停效果 */
	--footer-hover-text: var(--brand-primary-300);
	--footer-hover-bg: var(--gray-700);

	/* ===========================================
	 * 5. 按钮模块 (Button)
	 * =========================================== */

	/* 主要按钮 */
	--button-primary-bg: var(--brand-primary);
	--button-primary-text: var(--color-white);
	--button-primary-border: var(--brand-primary);
	--button-primary-shadow: var(--shadow-base);

	/* 主要按钮悬停 */
	--button-primary-hover-bg: var(--brand-primary-400);
	--button-primary-hover-shadow: var(--shadow-lg);
	--button-primary-hover-transform: translateY(-1px);

	/* 主要按钮激活 */
	--button-primary-active-bg: var(--brand-primary-600);
	--button-primary-active-transform: translateY(0);

	/* 次要按钮 */
	--button-secondary-bg: var(--gray-700);
	--button-secondary-text: var(--gray-200);
	--button-secondary-border: var(--gray-600);
	--button-secondary-shadow: var(--shadow-sm);

	/* 次要按钮悬停 */
	--button-secondary-hover-bg: var(--gray-600);
	--button-secondary-hover-text: var(--gray-100);
	--button-secondary-hover-border: var(--gray-500);

	/* 边框按钮 */
	--button-outline-bg: transparent;
	--button-outline-text: var(--brand-primary-300);
	--button-outline-border: var(--brand-primary-300);

	/* 边框按钮悬停 */
	--button-outline-hover-bg: var(--brand-primary-300);
	--button-outline-hover-text: var(--gray-900);

	/* 幽灵按钮 */
	--button-ghost-bg: transparent;
	--button-ghost-text: var(--gray-300);
	--button-ghost-hover-bg: var(--gray-800);

	/* ===========================================
	 * 6. 文字模块 (Text)
	 * =========================================== */

	/* 主要文字 */
	--text-primary: var(--gray-100);
	--text-secondary: var(--gray-400);
	--text-tertiary: var(--gray-600);
	--text-placeholder: var(--gray-500);

	/* 标题文字 */
	--text-heading: var(--gray-100);
	--text-title: var(--brand-primary-300);
	--text-subtitle: var(--gray-300);

	/* 链接文字 */
	--text-link: var(--brand-primary-300);
	--text-link-hover: var(--brand-primary-200);
	--text-link-visited: var(--brand-primary-400);

	/* ===========================================
	 * 7. 表单模块 (Form)
	 * =========================================== */

	/* 输入框基础 */
	--input-bg: var(--gray-800);
	--input-border: var(--gray-600);
	--input-text: var(--gray-100);
	--input-placeholder: var(--gray-500);
	--input-shadow: var(--shadow-sm);

	/* 输入框聚焦 */
	--input-focus-border: var(--brand-primary-300);
	--input-focus-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
	--input-focus-bg: var(--gray-800);

	/* 输入框禁用 */
	--input-disabled-bg: var(--gray-900);
	--input-disabled-text: var(--gray-600);
	--input-disabled-border: var(--gray-700);

	/* ===========================================
	 * 8. 表格模块 (Table)
	 * =========================================== */

	/* 表格基础 */
	--table-bg: var(--gray-800);
	--table-border: var(--gray-700);
	--table-header-bg: var(--gray-700);
	--table-header-text: var(--gray-200);

	/* 表格行 */
	--table-row-bg: var(--gray-800);
	--table-row-alt-bg: var(--gray-700);
	--table-row-hover-bg: rgba(59, 130, 246, 0.1);
	--table-row-selected-bg: rgba(59, 130, 246, 0.2);

	/* ===========================================
	 * 9. 其他组件
	 * =========================================== */

	/* 分割线 */
	--divider: var(--gray-700);
	--divider-light: var(--gray-800);

	/* 滚动条 */
	--scrollbar-bg: var(--gray-800);
	--scrollbar-thumb: var(--gray-600);
	--scrollbar-thumb-hover: var(--gray-500);

	/* 选中状态 */
	--selection-bg: rgba(59, 130, 246, 0.3);
	--selection-text: var(--gray-100);
}

/* ===========================================
 * 全局基础样式
 * =========================================== */

html,
body,
#app {
	padding: 0;
	margin: 0;
	font-family: var(--font-family-sans);
	font-size: var(--font-size-sm);
	line-height: var(--line-height-normal);
	box-sizing: border-box;
	transition:
		background-color var(--transition-base),
		color var(--transition-base);
}

/* 自定义滚动条样式 */
::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}

::-webkit-scrollbar-track {
	background: var(--scrollbar-bg);
	border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb {
	background: var(--scrollbar-thumb);
	border-radius: var(--radius-full);
	transition: background-color var(--transition-fast);
}

::-webkit-scrollbar-thumb:hover {
	background: var(--scrollbar-thumb-hover);
}

/* 选中文本样式 */
::selection {
	background: var(--selection-bg);
	color: var(--selection-text);
}

/* ===========================================
 * Element Plus 图片预览器全局样式
 * =========================================== */

/* 确保图片预览器始终在最顶层 */
.el-image-viewer__wrapper {
	z-index: 9999 !important;
}

.el-image-viewer__mask {
	background-color: rgba(0, 0, 0, 0.8) !important;
}

/* 预览器控制按钮 */
.el-image-viewer__btn {
	z-index: 10000 !important;
	color: var(--color-white) !important;
	background-color: rgba(0, 0, 0, 0.5) !important;
	border-radius: var(--radius-full) !important;

	&:hover {
		background-color: rgba(0, 0, 0, 0.8) !important;
	}
}

/* 预览器图片容器 */
.el-image-viewer__canvas {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

/* 确保预览图片适当大小 */
.el-image-viewer__canvas img {
	max-width: 90vw !important;
	max-height: 90vh !important;
	object-fit: contain !important;
}

.product-card {
	border-top: 4px solid var(--brand-primary) !important;
	border-bottom: 4px solid var(--brand-primary) !important;
}

/* ===============================
 * ⚠️ 以下为旧版本配置 (Legacy Configuration) - 保留以确保兼容性
 * ===============================
 * 注意：如有冲突，以上方新版本配置为准
 * 此部分将在未来版本中逐步迁移或移除
 * 来源：src/stylesCopy/main.scss
 */

/* 浅色主题 (Legacy) */
body.light {
	/* 使用渐变背景 */
	background: var(--gradient-bg-light);
	color: #1e293b;

	--theme-scrollbar-bg: var(--gradient-bg-dark);

	--theme-header-bg: var(--gradient-bg-light);
	--theme-header-text: #1e293b;
	--theme-header-text-muted: #94a3b8;
	--theme-header-border: rgba(30, 41, 59, var(--opacity-border-light));
	--theme-header-hover: rgba(59, 130, 246, var(--opacity-hover-light));

	--theme-header-text-menu: #1e293b; /* 菜单文字 */
	--theme-header-text-menu-active: #94a3b8; // 菜单文字激活
	--theme-header-text-menu-active-bg: rgba(
		59,
		130,
		246,
		var(--opacity-hover-light)
	); // 菜单文字激活背景
	--theme-header-menu-bg: #f8fafc;
	--theme-header-text-menu-hover: #3b82f6; // 菜单文字悬停
	--theme-header-text-menu-hover-bg: rgba(
		100,
		181,
		246,
		var(--opacity-hover-light)
	); // 菜单文字悬停背景

	--theme-footer-bg: var(--gradient-bg-light);
	--theme-footer-text: #1e293b;
	--theme-footer-text-muted: #94a3b8;
	--theme-footer-border: #e2e8f0;
	--theme-footer-hover: rgba(59, 130, 246, var(--opacity-hover-light));

	--theme-accent: #3b82f6;
	--theme-accent-hover: #2563eb;

	/* 内容区域 */
	--theme-content-bg: var(--gradient-content-light);
	--theme-content-text: #1e293b;
	--theme-content-text-muted: #64748b;
	--theme-content-title: #3b82f6;
	--theme-content-border: #e2e8f0;
	--theme-content-hover: rgba(59, 130, 246, 0.05);

	/* 卡片样式 (使用毛玻璃效果) */
	--theme-card-bg: rgba(255, 255, 255, 0.9);
	--theme-card-border: rgba(30, 41, 59, var(--opacity-border-light));
	--theme-card-shadow: var(--shadow-card-light);
	--theme-card-shadow-hover: 0 20px 40px rgba(0, 0, 0, 0.15);
	--theme-card-footer-bg: rgba(248, 250, 252, 0.8);

	/* AboutUs 专用变量 */
	--theme-hero-bg: var(--gradient-content-light);
	--theme-hero-overlay: linear-gradient(
		135deg,
		rgba(0, 0, 0, 0.3),
		rgba(0, 0, 0, 0.1)
	);
	--theme-feature-bg: rgba(248, 250, 252, 0.8);
	--theme-image-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
	--theme-overlay-bg: rgba(0, 0, 0, 0.6);
	--theme-nav-bg: var(--gradient-bg-light);
	--theme-nav-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
	--theme-nav-highlight: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0.4),
		transparent
	);

	/* 图标样式 */
	--theme-icon-bg: rgba(59, 130, 246, 0.1);
	--theme-icon-bg-hover: rgba(59, 130, 246, 0.2);

	/* 按钮样式 */
	--theme-button-primary-bg: #3b82f6;
	--theme-button-primary-bg-hover: #2563eb;
	--theme-button-primary-text: #ffffff;
	--theme-button-secondary-bg: #f3f4f6;
	--theme-button-secondary-bg-hover: #e5e7eb;
	--theme-button-secondary-text: #374151;
	--theme-button-outline-border: #d1d5db;
	--theme-button-outline-text: #374151;
	--theme-button-outline-hover-bg: #f9fafb;
	--theme-button-shadow-hover: 0 8px 25px rgba(59, 130, 246, 0.25);
	--theme-button-ghost-bg: rgba(248, 250, 252, 0.8);

	/* 按钮基础样式 */
	--theme-button-bg: #ffffff;
	--theme-button-border: #d1d5db;
	--theme-button-hover-bg: #f8fafc;
	--theme-button-hover-border: #9ca3af;

	/* 下拉菜单样式 */
	--theme-dropdown-bg: rgba(255, 255, 255, 0.95);
	--theme-dropdown-border: rgba(203, 213, 225, 0.6);
	--theme-dropdown-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);

	/* 进度条样式 */
	--theme-progress-bg: #f3f4f6;

	/* 表格行样式 */
	--theme-table-row-bg: rgba(255, 255, 255, 0.8);
	--theme-table-row-striped: rgba(248, 250, 252, 0.8);

	/* 错误状态样式 */
	--theme-error: #ef4444;

	/* 区域背景 */
	--theme-section-alt-bg: rgba(248, 250, 252, 0.5);

	/* 表单组件 */
	--theme-input-bg: rgba(255, 255, 255, 0.8);
	--theme-input-border: rgba(203, 213, 225, 0.6);
	--theme-input-border-focus: #3b82f6;
	--theme-input-text: #1e293b;
	--theme-input-placeholder: #9ca3af;
	--theme-input-disabled-bg: #f9fafb;
	--theme-input-disabled-text: #9ca3af;

	/* 表格样式 */
	--theme-table-bg: rgba(255, 255, 255, 0.8);
	--theme-table-header-bg: rgba(100, 181, 246, var(--opacity-hover-light));
	--theme-table-header-text: #374151;
	--theme-table-border: rgba(203, 213, 225, var(--opacity-border-dark));
	--theme-table-row-hover: rgba(59, 130, 246, 0.05);
	--theme-table-row-selected: #eff6ff;

	/* 分割线 */
	--theme-divider: #e5e7eb;
	--theme-divider-light: #f3f4f6;

	/* 提示区域 */
	--theme-tips-bg: rgba(59, 130, 246, 0.05);
	--theme-selected-elements-bg: rgba(248, 250, 252, 0.8);

	/* 骨架屏样式 */
	--theme-skeleton-bg: #f3f4f6;
	--theme-skeleton-shimmer: linear-gradient(
		90deg,
		transparent,
		rgba(255, 255, 255, 0.6),
		transparent
	);
}

/* 深色主题 (Legacy) */
body.dark {
	/* 使用渐变背景 */
	background: var(--gradient-bg-dark);
	color: #e2e8f0;

	--theme-scrollbar-bg: var(--gradient-bg-light);

	--theme-header-bg: var(--gradient-bg-dark);
	--theme-header-text: #e2e8f0;
	--theme-header-text-menu: #e2e8f0;
	--theme-header-text-muted: #94a3b8;
	--theme-header-border: rgba(100, 181, 246, var(--opacity-border-light));
	--theme-header-hover: rgba(100, 181, 246, var(--opacity-hover-light));

	/* 深色主题菜单样式 */
	--theme-header-menu-bg: #0c1525;
	--theme-header-text-menu-active: #3b82f6; // 菜单文字激活
	--theme-header-text-menu-active-bg: rgba(
		100,
		181,
		246,
		var(--opacity-border-light)
	); // 菜单文字激活背景
	--theme-header-text-menu-hover: #42a5f5; // 菜单文字悬停
	--theme-header-text-menu-hover-bg: rgba(
		100,
		181,
		246,
		var(--opacity-hover-dark)
	); // 菜单文字悬停背景

	--theme-footer-bg: var(--gradient-bg-dark);
	--theme-footer-text: #e2e8f0;
	--theme-footer-text-muted: #adb5bd;
	--theme-footer-border: #495057;
	--theme-footer-hover: rgba(255, 255, 255, var(--opacity-hover-light));

	--theme-accent: #3b82f6;
	--theme-accent-hover: #42a5f5;

	/* 内容区域 */
	--theme-content-bg: var(--gradient-content-dark);
	--theme-content-text: #ffffff;
	--theme-content-text-muted: #94a3b8;
	--theme-content-title: #3b82f6;
	--theme-content-border: #334155;
	--theme-content-hover: rgba(100, 181, 246, var(--opacity-hover-light));

	/* 卡片样式 (使用毛玻璃效果) */
	--theme-card-bg: rgba(30, 41, 59, 0.8);
	--theme-card-border: rgba(100, 181, 246, var(--opacity-hover-light));
	--theme-card-shadow: var(--shadow-card-dark);
	--theme-card-shadow-hover: 0 20px 40px rgba(0, 0, 0, 0.4);
	--theme-card-footer-bg: rgba(15, 23, 42, 0.6);

	/* AboutUs 专用变量 */
	--theme-hero-bg: var(--gradient-content-dark);
	--theme-hero-overlay: linear-gradient(
		135deg,
		rgba(0, 0, 0, 0.5),
		rgba(0, 0, 0, 0.2)
	);
	--theme-feature-bg: rgba(15, 23, 42, 0.6);
	--theme-image-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
	--theme-overlay-bg: rgba(0, 0, 0, 0.7);
	--theme-nav-bg: var(--gradient-bg-dark);
	--theme-nav-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
	--theme-nav-highlight: linear-gradient(
		90deg,
		rgba(100, 181, 246, 0.4),
		transparent
	);

	/* 图标样式 */
	--theme-icon-bg: rgba(100, 181, 246, 0.1);
	--theme-icon-bg-hover: rgba(100, 181, 246, 0.2);

	/* 按钮样式 */
	--theme-button-primary-bg: #3b82f6;
	--theme-button-primary-bg-hover: #42a5f5;
	--theme-button-primary-text: #ffffff;
	--theme-button-secondary-bg: #374151;
	--theme-button-secondary-bg-hover: #4b5563;
	--theme-button-secondary-text: #f9fafb;
	--theme-button-outline-border: #4b5563;
	--theme-button-outline-text: #d1d5db;
	--theme-button-outline-hover-bg: #374151;
	--theme-button-shadow-hover: 0 8px 25px rgba(100, 181, 246, 0.25);
	--theme-button-ghost-bg: rgba(15, 23, 42, 0.6);

	/* 按钮基础样式 */
	--theme-button-bg: #374151;
	--theme-button-border: #4b5563;
	--theme-button-hover-bg: #4b5563;
	--theme-button-hover-border: #6b7280;

	/* 下拉菜单样式 */
	--theme-dropdown-bg: rgba(30, 41, 59, 0.95);
	--theme-dropdown-border: rgba(100, 181, 246, 0.3);
	--theme-dropdown-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);

	/* 进度条样式 */
	--theme-progress-bg: #374151;

	/* 表格行样式 */
	--theme-table-row-bg: rgba(30, 41, 59, 0.6);
	--theme-table-row-striped: rgba(15, 23, 42, 0.6);

	/* 错误状态样式 */
	--theme-error: #f87171;

	/* 区域背景 */
	--theme-section-alt-bg: rgba(15, 23, 42, 0.3);

	/* 表单组件 */
	--theme-input-bg: rgba(15, 23, 42, 0.6);
	--theme-input-border: rgba(100, 181, 246, var(--opacity-border-dark));
	--theme-input-border-focus: #3b82f6;
	--theme-input-text: #e2e8f0;
	--theme-input-placeholder: #9ca3af;
	--theme-input-disabled-bg: #1f2937;
	--theme-input-disabled-text: #6b7280;

	/* 表格样式 */
	--theme-table-bg: rgba(30, 41, 59, 0.6);
	--theme-table-header-bg: rgba(100, 181, 246, var(--opacity-hover-light));
	--theme-table-header-text: #3b82f6;
	--theme-table-border: rgba(100, 181, 246, var(--opacity-hover-light));
	--theme-table-row-hover: rgba(100, 181, 246, 0.05);
	--theme-table-row-selected: rgba(100, 181, 246, var(--opacity-hover-light));

	/* 分割线 */
	--theme-divider: #4b5563;
	--theme-divider-light: #374151;

	/* 提示区域 */
	--theme-tips-bg: rgba(100, 181, 246, var(--opacity-hover-light));
	--theme-selected-elements-bg: rgba(15, 23, 42, 0.6);

	/* 骨架屏样式 */
	--theme-skeleton-bg: #374151;
	--theme-skeleton-shimmer: linear-gradient(
		90deg,
		transparent,
		rgba(100, 181, 246, 0.3),
		transparent
	);
}

/* 全局基础样式 (Legacy) */
html,
body,
#app {
	padding: 0;
	margin: 0;
	font-size: var(--global-font-size); /* 使用全局字体大小变量 */
	box-sizing: border-box; /* 确保 padding 在 max-width 范围内 */
	transition:
		background-color 0.3s ease,
		color 0.3s ease;
	// background-color: black;
}

/* 自定义滚动条样式 (Legacy) */
::-webkit-scrollbar {
	width: 4px; /* 滚动条宽度 */
	height: 4px; /* 滚动条高度（水平滚动条） */
}

/* 滚动条轨道 (Legacy) */
::-webkit-scrollbar-track {
	background: #f5f5f5; /* 滚动条轨道背景色 */
	border-radius: 10px; /* 圆角 */
	display: none;
}

/* 滚动条滑块 (Legacy) */
::-webkit-scrollbar-thumb {
	background: var(--theme-scrollbar-bg); /* 滑块颜色 */
	border-radius: 10px; /* 圆角 */
}

/* 滑块 hover 时 (Legacy) */
::-webkit-scrollbar-thumb:hover {
	background: var(--theme-scrollbar-bg); /* 滑块 hover 颜色 */
}

// 解决 输入框和按钮同行换行时 样式不对的问题
.button-container {
	// 给每个模块设置间隔区域 灰色直线
	display: flex;
	flex-wrap: wrap;

	.button {
		position: relative;
		margin: 0 20px 10px 0 !important;
	}

	.button:not(:last-child):after {
		content: '';
		width: 1px;
		height: 90%;
		background-color: #ccc;
		position: absolute;
		right: -11px;
		top: 50%;
		transform: translateY(-50%);
	}
}
